<html>
	<head>
		<title>Mon-tagger</title>
		<link rel="stylesheet" href="static/css/montagger.css" type="text/css" media="screen"/>
		<link rel="stylesheet" 
			href="static/supersized/3.2.1/css/supersized.css" 
			type="text/css" media="screen"/>
		<link rel="stylesheet" 
			href="static/supersized/3.2.1/theme/supersized.shutter.css" 
			type="text/css" media="screen"/>
		<script src="http://connect.facebook.net/en_US/all.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
		<script type="text/javascript" src="static/supersized/3.2.1/js/jquery.easing.min.js"></script>
		<script type="text/javascript" src="static/supersized/3.2.1/js/supersized.3.2.1.min.js"></script>
		<script type="text/javascript" src="static/supersized/3.2.1/theme/supersized.shutter.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#fbLogin").show();
				$("#buttons").hide();
				$("#loginMandatory").hide();
				FB.init({
					appId: '202700846420322', 
					status: true, 
					cookie: true,
					xfbml: true
				});
				
				$('#fbLogin').click(function() {
					handleLogin();
				});
			});

			function handleLogin() {
				var access_token = null;
				FB.getLoginStatus(function(response){
					if (response.session && response.perms) {
						access_token=response.session.access_token;
						setButtons(access_token);
					} else {
						FB.login(function(response){
							if (response.session && response.perms) {
								access_token = response.session.access_token;
								setButtons(access_token);
							} else {
								$("#loginMandatory").show('slow');
							}
						},{perms:'user_photos'});
					}
				});
			}
			
			function setButtons(access_token) {
				$("#comments").click(function() {
					window.location="/buildMontage?type=comments&accessToken="+access_token;
				});
				$("#likes").click(function() {
					window.location="/buildMontage?type=likes&accessToken="+access_token;
				});
				$("#fbLogin").hide('slow');
				$("#buttons").show('slow');				
			}

			imageLinks = [];
			for(index=10;index>0;index--){
				imageLinks.push({image:"static/slideIntro-"+index.toString()+".png"});
			}
			
			$(function(){
				$.supersized({
					slide_interval:3000,
					transition:3,
					transition_speed:700,
					slide_links:false,
					horizontal_center:1,
					slides : imageLinks
				});
				vars.image_path="static/supersized/3.2.1/img/";
			});
		</script>
	</head>
	<body>
		<div id="fb-root"></div>
		<div id="infoOverlay">
			<h1>Mon-tagger</h1>
			<ul>
				<li><input type="submit" id="fbLogin" value="Build your own slideshow"></li>
				<li><div id="loginMandatory">You Need to login to use this page</div></li>
				<div id="buttons">
					<li><input type="submit" id="comments" value="View top Commented photos"></li>
					<li><input type="submit" id="likes" value="View top Liked photos"></li>
				</div>
			
			</ul>
		</div>
		<div id="progress-back" class="load-item">
			<div id="progress-bar"></div>
		</div>
	</body>
</html>
